@import "lib/mixin";

$numpad-height:                     44px !default;

.numpad {
    display: flex !important;
    overflow: hidden;
    text-align: center;
    flex-direction: row;
    flex-wrap: wrap;

    .numbers, .actions {
        display: flex;
        flex-wrap: wrap;

        .item {
            flex: 1;
            position: relative;
            user-select: none;
            line-height: $numpad-height;
            min-height: $numpad-height;
            display: inline-block;

            &[val="ok"] {
                min-height: $numpad-height * 2;
                line-height: $numpad-height * 2;
            }

            @include retina-border(all, $border-default-color, true);
            @include retina-border-width(top, 0, true);
            @include retina-border-width(left, 0, true);

            &.active {
                background-color: $border-default-color;
            }

            &.disabled {
                opacity: 1;
                background-color: #f5f5f5;
            }
        }
    }

    .numbers {
        flex: 3;
        flex-direction: row;

        .item {
            min-width: 33%;
        }
    }

    .actions {
        flex: 1;
        flex-direction: column;
    }
}